<template>
    <div id="box">
        <!--导航-->
        <div id="nav">
            <Navbar>
                <span @click="back" slot="left" class="fa fa-chevron-left nav-size"></span>
                <span slot="center" class="nav-size">{{tripTitle}}</span>
            </Navbar>
        </div>
        <!--内容-->
        <div id="content">
            <div id="layer" v-show="isShow"><img src="static/icons/loading.gif" alt=""></div>
            <div class="content-box" v-for="i in value">
                <!--价格脱离-->
                <div class="price"><span class="price-size">{{i.currency_code}}</span>{{i.niceprice}}<span class="price-size">起</span></div>
                <!--左侧脱离-->
                <div id="img-left">
                    <span>{{tripTitle}}</span>
                    <span>|</span>
                    <span>深度休闲</span>
                    <span class="fa fa-flag-o"></span>
                </div>
                <img :src="i.thumbimg">
                <div class="bottom">
                    <span>{{i.caption}}</span>
                    <div class="start">
                        <span class="fa fa-star"></span>
                        <span class="fa fa-star"></span>
                        <span class="fa fa-star"></span>
                        <span class="fa fa-star"></span>
                        <span class="fa fa-star-o"></span>
                    </div>
                </div>
            </div>
           <div class="line" v-show="empty">没有更多了</div>
        </div>
         
    </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import {mapState} from "vuex"

export default {
    data:function(){
        return{
            
        }
    },
    props:["value","tripTitle","empty","isShow"],
    components:{
        Navbar,
    },
    methods:{
         back(){
            history.back();
        }
    }
}
</script>

<style lang='css' scoped>
    #box{
        width: 100vw;
        height: 100vh;
    }
    #content{
        background-color: #ecebeb;
        padding-left: 1px; 
        position: relative;
        width: 100vw;
        height: calc(100vh - 53px);
        overflow: scroll;  
        overflow-x: hidden;
    }
    #nav{
        background-color: #3880C7;
        width: 100vw;
        z-index: 100;
    }
    .nav-size{
        font-size: 18px;
        color: #fff;
    }
    .start{
        font-size: 14px;
        color: #ffe5a5;
    }
    .start span:nth-last-of-type(1){
        color: #ddd
    }
    .bottom{
        display: flex;
        justify-content:space-between;
        padding: 0 10px;
    }
    img{
        width: 100vw;
        height: 170px;
        /*border: 1px  solid red;*/
    }
    .content-box{
        width: 100vw;
        background-color: #fff;
        position: relative;
        margin-top: 5px;
    }
    .bottom>span{
        font-size: 14px;
        margin: 10px 0;
        padding-bottom: 5px;
        width: 60vw;
        height: 30px;
        color: #353535;
    }
    .price{
        position: absolute;
        left: 15px;
        bottom: 65px;
        width: 73px;
        height: 33px;
        background-color: #ff6e6a;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        line-height: 33px;
        font-size: 17px;
    }
    .price-size{
        font-size: 13px;
    }
    #img-left{
        width: 130px;
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
        position: absolute;
        right: 10px;
        bottom: 65px;
    }
    #layer{
        position: fixed;
        left: 45vw;;
        bottom: 5px;
        z-index: 10;
    }
    #layer img{
        width: 30px;
        height: 30px;
    }
    .line{
        font-size: 14px;
        width: 100px;
        height: 50px;
        line-height: 50px;
        /*border: 1px  solid red;*/
        left: 30vw;
        bottom: 10px;
        position: fixed;
        color: #fff!important;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 5px;
        text-align: center;
        
    }

</style>